const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { resolve } = require("path");
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

/**
 * PWA:渐进式网络开发应用程序（离线可访问）
 *  workbox --> workbox-webpack-plugin
 */
 
 
 module.exports = {
     entry:'./src/js/index.js',
     output:{
         filename:'built.[hash:10].js',
         path:resolve(__dirname,'build'),
     },
     module:{
         /**
          * 正常来讲 一个文件只能被一个Loader处理；
          * 当一个文件要被多个Loader处理，那么一定要先指定loader的执行顺序
          */
        rules:[
            // {
            //     test:/\.js$/,
            //     exclude:/node_modules/,
            //     //表示优先执行
            //     enforce:'pre',
            //     loader:'eslint-loader',
            //     options:{
            //         fix:true
            //     }
            // },
            {
                //以下loader只会匹配一个文件
                //注意：不能有两个配置处理同一个类型的文件.如有将其中一个提取到外面
                oneOf:[
                    {
                        test:/\.css/,
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.js$/,
                        exclude:/node_modules/,
                        use:[
                            /**
                             * 开启多进程打包
                             * 进程启动大概为600ms，进程通信也有开销
                             * 只有工作消耗时间比较长，才需要多进程打包
                             */
                            {
                                loader:'thread-loader',
                                options:{
                                    workers:2 //进程2个
                                }
                            },
                            {
                                loader:'babel-loader',
                                options:{
                                    presets:[[
                                        '@babel/preset-env',
                                        {
                                            //按需加载
                                            useBuiltIns:'usage',
                                            //指定core-js版本
                                            corejs:{
                                                version:3
                                            },
                                            //指定具体兼容性做到哪个版本浏览器
                                            targets:{
                                                chrome:'60',
                                                firefox:'60',
                                                ie:'9',
                                                safari:'10',
                                                edge:'17'
                                            }
                                        }
                                    ]],
                                    //开启babel缓存
                                    //第二次构建时，会去读之前的缓存
                                    cacheDirectory:true
                                }
                            }
                        ],
                       
                    }
                ]
            }
        ]
     },
     plugins:[
         new HtmlWebpackPlugin({
             template:'./src/index.html',
             //压缩html代码
             minify:{
                 //移除空格
                 collapseWhitespace:true,
                 //移除注释
                 removeComments:true
             }
         }),
         new WorkboxWebpackPlugin.GenerateSW({
            //1.帮助serviceworker快速启动
            //2.删除旧的servicework
            //生成一个serviceworker配置文件
            clientsClaim:true,
            skipWaiting:true
         })
     ],
     //生产环境会自动压缩js文件
     mode:'production',
    //  devtool:'source-map'
 }